<template>
  <v-dialog v-model="dialog" persistent max-width="600px">
    <v-card>
      <v-form ref="upload_form" v-model="valid" lazy-validation>
        <v-card-title>
          <span class="headline">上传文本数据</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12" sm="6" md="4">
                <v-text-field label="姓名" v-model="form.name"></v-text-field>
              </v-col>
              <v-col cols="12" sm="6" md="4">
                <v-text-field label="联系方式" v-model="form.phone"></v-text-field>
              </v-col>
              <v-col cols="12" sm="6" md="4">
                <v-select :items="items" label="类型*" v-model="form.type" :rules="rules"></v-select>
              </v-col>
              <v-col cols="12">
                <v-file-input show-size counter label="选择文件*" :rules="rules" v-model="form.file"></v-file-input>
              </v-col>
            </v-row>
          </v-container>
          <small>*为必填项</small>
        </v-card-text>
        <v-card-actions>
          <v-btn color="blue darken-1" text @click="closeDialog">关闭</v-btn>
          <v-btn color="blue darken-1" text @click="submit">提交</v-btn>
        </v-card-actions>
      </v-form>
      <v-snackbar v-model="snackbar.show" dark top timeout="3000" :color="snackbar.color">
        <v-icon class="mr-2">{{ snackbar.icon }}</v-icon>
        {{ snackbar.msg }}
        <template v-slot:action="{ attrs }">
          <v-btn icon v-bind="attrs" @click="snackbar.show = false">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </template>
      </v-snackbar>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: "UploadDialog",
  props: ["dialog"],
  data() {
    return {
      valid: true,
      items: ["专业", "口语", "通用"],
      form: {
        name: "",
        phone: "",
        type: "",
        file: null,
      },
      rules: [(value) => !!value || "必选项"],
      snackbar: {
        show: false,
        color: "success",
        icon: "mdi-check-circle",
        msg: "上传成功",
      },
    };
  },
  methods: {
    closeDialog() {
      this.$refs.upload_form.reset();
      this.$emit("closeDialog", 0);
    },
    submit() {
      if (this.$refs.upload_form.validate()) {
        this.axios
          .post("/api/uploadText", this.form)
          .then(function (response) {
            this.showSnack("success", "mdi-check-circle", "上传成功");
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    showSnack(color, icon, msg) {
      this.snackbar = {
        show: true,
        color: color,
        icon: icon,
        msg: msg,
      };
    },
  },
};
</script>